<!doctype html>
<!-- ASSIGN OUR ANGULAR MODULE -->
<html ng-app="lowpolify">

<head>
    <!-- META -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <base href="/">
    <!-- Optimize mobile viewport -->
    <title>Lowpolify</title>
    <!-- SCROLLS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi" crossorigin="anonymous">
    <!-- load bootstrap -->
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/github-corners.css">
    <link rel="stylesheet" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
    <link rel="stylesheet" type="text/css" href="/slider_module/rzslider.min.css" />
    <!-- SPELLS -->
    <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular-route.min.js"></script>
    <script src="/upload_module/ng-file-upload-all.min.js"></script>
    <script src="/slider_module/rzslider.min.js"></script>
    <!-- load angular -->
    <script src="js/controller/file-upload.js"></script>
    <script src="js/controller/clarifai-interact.js"></script>
    <!-- load up our controller -->
    <script src="js/services/upload-success.js"></script>
    <script src="js/services/low-polify.js"></script>
    <script src="js/services/clarifai.js"></script>
    <!-- load our node service -->
    <script src="js/core.js"></script>
    <!-- load our main application -->
    <script src="/socket.io/socket.io.js"></script>
    
</head>
<!-- SET THE CONTROLLER -->

<body>
    <nav class="navbar">
        <button class="navbar-toggler hidden-lg-up" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"></button>
        <div class="collapse navbar-toggleable-md" id="navbarResponsive">
            <a class="navbar-brand" href="#" style="font-family: 'Monoton', cursive; color: white; font-size: 4vh; padding-left: 1vw;">lowpolify</a>
        </div>
    </nav>
    <a href="https://github.com/ghostwriternr/lowpolify" class="github-corner" aria-label="View source on Github">
        <svg width="70" height="70" viewBox="0 0 250 250" style="fill:#fff; color:#151513; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true">
            <path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path>
            <path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path>
            <path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path>
        </svg>
    </a>
    <container-fluid>
        <div class="row">
            <div class="col-xs-12">
                <div class="card card-full">
                    <div class="card-block">
                        <form ng-controller="uploadController">
                            <div class="row" ng-show="outputFilePath.length>0">
                                <div class="col-xs-10 offset-xs-1" style="margin-bottom: 50px;">
                                    <rzslider rz-slider-model="slider.value" rz-slider-options="slider.options"></rzslider>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-xs-12 col-md-6 align-middle" align="center">
                                    <h4>Upload file here</h4>
                                    <div ng-show="!file" type="file" name="file" ngf-drop ngf-select ng-model="file" class="drop-box" ngf-drag-over-class="'dragover'" ngf-allow-dir="true" accept="image/*" ngf-pattern="'image/*'">Drop image here or click to upload</div>
                                    <img ng-show="file" type="file" name="file" class="drop-box-full img-responsive" ngf-drop ngf-select ng-model="file" ngf-drag-over-class="'dragover'" ngf-allow-dir="true" accept="image/*" ngf-pattern="'image/*'" ngf-src="file" ngf-resize="{centerCrop: true}">
                                    <div style="font:smaller; padding-left: 1vw; padding-right: 1vw; padding-top: 1vw;">{{errFile.name}} {{errFile.$error}} {{errFile.$errorParam}}
                                        <span class="progress" ng-show="f.progress >= 0 && f.progress < 100">
                                            <progress class="progress progress-striped progress-animated" value="{{f.progress}}" max="100">Uploaded: {{f.progress}}%</progress>
                                        </span>
                                    </div>
                                    <p>{{errorMsg}}</p>
                                </div>
                                <!--
                                -->
                                <div class="col-xs-12 col-md-6 align-middle" align="center">
                                    <h4>Low poly output</h4>
                                    <svg ng-show="!outputFilePath" width='114px' height='114px' xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" class="uil-triangle">
                                        <rect x="0" y="0" width="100" height="100" fill="none" class="bk"></rect>
                                        <path d="M34.5,52.4c-0.8,1.4-2.2,1.4-3,0L17.2,27.6C16.4,26.2,17,25,18.7,25h28.6c1.6,0,2.3,1.2,1.5,2.6L34.5,52.4z" fill="#ff6a80">
                                            <animateTransform attributeName="transform" type="rotate" from="0 33 35" to="120 33 35" repeatCount="indefinite" dur="1s"></animateTransform>
                                        </path>
                                        <path d="M68.5,52.4c-0.8,1.4-2.2,1.4-3,0L51.2,27.6C50.4,26.2,51,25,52.7,25h28.6c1.7,0,2.3,1.2,1.5,2.6L68.5,52.4z" fill="#ff7d54">
                                            <animateTransform attributeName="transform" type="rotate" from="0 67 35" to="120 67 35" repeatCount="indefinite" dur="1s"></animateTransform>
                                        </path>
                                        <path d="M51.5,82.4c-0.8,1.4-2.2,1.4-3,0L34.2,57.6C33.4,56.2,34,55,35.7,55h28.6c1.7,0,2.3,1.2,1.5,2.6L51.5,82.4z" fill="#ff8f27">
                                            <animateTransform attributeName="transform" type="rotate" from="0 50 65" to="120 50 65" repeatCount="indefinite" dur="1s"></animateTransform>
                                        </path>
                                    </svg>
                                    <div ng-show="isProcessing()">{{currentStatus}}</div>
                                    <div class="row" ng-show="outputFilePath.length>0">
                                        <img class="drop-box-full img-responsive" ng-src="data:image/jpeg;base64,{{outputFilePath}}">
                                    </div>
                                </div>
                            </div>
                        </form>
                        <div ng-controller="clarifaiController" ng-show="imageTags.length>0">
                            <div class="row">
                                <div class="col-xs-12" align="center">
                                    <div class="btn-group" role="group" aria-label="Image tags">
                                        <button ng-repeat="tag in imageTags" type="button" class="btn btn-outline-warning" ng-click="download(tag.name)">{{tag.name}}</button>
                                    </div>
                                    <br/>
                                    <br/>
                                    <h5 style="color: #ff7d54;">Click on any of the above to save lowpoly image with the corresponding name</h5>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </container-fluid>
    <script async defer src="https://buttons.github.io/buttons.js"></script>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/tether/1.3.7/js/tether.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js" integrity="sha384-BLiI7JTZm+JWlgKa0M0kGRpJbF2J8q+qreVrKBC47e3K6BW78kGLrCkeRX6I9RoK" crossorigin="anonymous"></script>
</body>

</html>
